<template>
    <div class="bgc">
        <Header></Header>
        <Nav></Nav>
        <div class="wechatlogin">
            <ol>
                <dt>登录后开发者将获得以下权限</dt>
                <dd class="dd">获得你的公开信息（昵称、头像、地区等）</dd>
            </ol>
            <div class="wechatlogin_ confirm">
                <van-button type="success" icon="chat-o" icon-position="right"
                    :to="{ path: '/wechatcode' }">确认登录</van-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import Header from "@/components/login/header/Header.vue";
import Nav from "@/components/login/nav/Nav.vue";
</script>

<style lang="scss" scoped>
.bgc {
    background-color: #fff;
    height: 100%;
}

.wechatlogin {
    display: flex;
    flex-direction: column;
    align-items: center;

    ol {
        margin-top: 50px;
        line-height: 30px;

        dt {
            font-size: 14px;
        }

        dd {
            font-size: 12px;
            color: #36282b;
            opacity: 0.7;
        }

        .dd::before {
            content: "·";
            font-size: 20px;
            font-weight: bold;
            padding-right: 10px;
        }
    }

    .van-button {
        width: 300px;
        margin: 20px 0;
    }
}
</style>
